<template>
  <div class="nav">
    <ul class="classic">
      <li>
          <img src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          <p class="title">景点门票</p>
      </li>
      <li>
        <img src="http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png" alt="">
        <p class="title">一日游</p>
      </li>
      <li>
        <img src="http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png" alt="">
        <p class="title">踏青专题</p>
      </li>
      <li>
        <img src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/de711920c71e38287d9f95f7910aa1aa.png" alt="">
        <p class="title">精品小团</p>
      </li>
      <li>
        <img src="http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png" alt="">
        <p class="title">西安必游</p>
      </li>
      <li>
        <img src="http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png" alt="">
        <p class="title">动植物园</p>
      </li>
      <li>
        <img src="http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png" alt="">
        <p class="title">华清宫</p>
      </li>
      <li>
        <img src="http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png" alt="">
        <p class="title">兵马俑</p>
      </li>


    </ul>
  </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>
  .nav .classic{
    width: 100%;
    height: 100px;
  }
  .nav .classic li{
    list-style: none;
    float: left;
    width: 25%;
    height: 1.5rem;
    padding-top: .1rem;
    text-align: center;
  }
  .nav .classic img{
    width: 55px;
    height: 55px;
  }
  .title{
    margin-top: .1rem;
    color: #212121;
    font-size: .28rem;
  }
</style>
